<template>
    <div>
<!--        <h2>课程详情页</h2>-->
        <topAdv :is-show="true" :class="['margin']"></topAdv>
       <div style="background: #f4f4f4">
           <div class="mian-box">
               <div class="icon"><span class="el-icon-house">&nbsp;</span><a href="">首页&nbsp;&nbsp;/</a>&nbsp;&nbsp;<a href="">视频详情</a></div>
               <div class="text-img">
                    <div class="img">
                        <img :src="this.courseList.coverFileUrl" alt="">
                    </div>
                   <div class="text">
                       <h4>{{this.courseList.courseTitle}}</h4>
                       <div class="star">累计{{this.courseList.subSectionNum}}人学习
                           <img src="../../assets/star3.png" alt="">
                           <img src="../../assets/star3.png" alt="">
                           <img src="../../assets/star3.png" alt="">
                           <img src="../../assets/star3.png" alt="">
                           <img src="../../assets/star4.png" alt="">
                       </div>
                       <p class="price" v-if="true">￥{{this.courseList.coursePrice}}</p>
                       <button class="btn">立即观看</button>
                   </div>
                   <div class="love"><img src="../../assets/love.png" alt="">&nbsp;收藏</div>
               </div>
               <div class="switch-list">
                   <el-tabs v-model="activeName"  class="tabs">
                       <el-tab-pane label="课程描述" name="first">
                          <p v-html="this.courseList.courseDetail"></p>
                       </el-tab-pane>
                       <el-tab-pane label="目录" name="second">
                           <li class="big-title" v-for="(item,index) in courseListDeep " :key="index">
                              {{index+1}} {{item.sectionName}}
                               <div class="down"><img src="../../assets/down.png" alt="">下载</div>
                               <ul>
                                   <li class="small-title" v-for="(v,i) in item.subSections" :key="i">{{index+1}}.{{i+1}} {{v.sectionName}}</li>
<!--                                   <li class="small-title">1-2 fink介绍</li>-->
                               </ul>
                           </li>
                       </el-tab-pane>
                       <el-tab-pane label="评论" name="third">
                           <p>评论</p>
                           <div class="evaluation">
                               <el-rate
                                   v-model="value"
                                   show-text>
                                </el-rate>
                           </div>
                           <div>
                               <textarea name="" id="" placeholder="请尽情评论吧" cols="30" rows="10" class="comments">

                               </textarea>
                           </div>
                           <div class="publish">发表评论</div>
                           <div class="line">

                           </div>
                           <div>
                               <div class="head-portrait" v-for="(item,index) in commentsList.rows" :key="index">
                                   <div style="overflow: hidden;">
                                       <div class="circle-img"><img :src="item.user.avatarUrl" alt=""></div>
                                       <div class="head">{{item.user.nickname}}</div>
                                       <div class="star-1">
                                           <el-rate v-model="item.score"></el-rate>
                                       </div>
                                   </div>

                                   <div class="text-1">{{item.commentContent}}</div>

                                   <div class="right">  <div>回复</div><div class="time">{{item.createdTime}}</div></div>
                                   <ul>
                                       <li class="reply-comment" v-for="v in item.subCommentList" :key="v.commentId">
                                            <div style="overflow: hidden;margin-top: 20px" ><div class="small-img"><img :src="v.user.avatarUrl" alt="" ></div>
                                            <div class="text-2"><span class="name-1">{{v.user.nickname}}</span>&nbsp;&nbsp;回复 <span class="name-2">{{v.parentUserName}}</span> <span>{{v.commentContent}}</span></div>
                                            </div>
                                         <div class="right-1"> <div>回复</div> <div>{{v.createdTime}}</div></div>
                                       </li>

                                   </ul>
                                   <br>
                                   <hr>

                               </div>

                           </div>

                           <div class="paging">
                               <el-pagination
                                       background
                                       layout="prev, pager, next"
                                       :total="commentsList.total"
                                        @current-change="handleSizeChange">
                               </el-pagination>
                           </div>
                       </el-tab-pane>
                   </el-tabs>
               </div>

           </div>

       </div>


        <footerList></footerList>
    </div>
</template>

<script>
    import topAdv from "../../components/topAdv";
    import footerList from "../../components/footerModify";
    import {getBufferPage, getComment} from "../../api/course";
    // import {getBufferPage} from "../../api";

    export default {
        name: "courseDetails",
        components:{
            topAdv,
            footerList,
        },
        data(){
            return{
                isShow:true,//下拉菜单显示
                activeName: 'first',//目录第一个
                value: null,//星星
                courseList:[],//课程列表
                courseListDeep:[],//课程深入列表
                commentsList:[],//评论列表
            }
        },
        created() {
            // console.log(this.$route.query.id)
            getBufferPage(this.$route.query.id).then(res=>{
                console.log(res.data);
                this.courseList=res.data;
                this.courseListDeep = res.data.sections

            })
            //评论
            getComment(this.$route.query.id,1).then(res=>{
                console.log(res)
                this.commentsList=res
            })

        },
        methods:{
            handleSizeChange(page){
                getComment(this.$route.query.id,page).then(res=>{
                    console.log(res)
                    this.commentsList=res

            })
            }
        },


    }
</script>

<style scoped lang="less">
.margin {
    width: 1260px;
    margin: auto;
}
.el-menu-demo {
    width: 270px;
}
 .mian-box {
     margin: 30px auto;
     width: 1200px;
     /*height: 800px;*/
     /*border: 1px solid red;*/

 }
    .icon {
        margin: 10px;
        a{
            font-size: 14px;
            color: gray;
        }
        a:hover {
            color: #00cf8c;
        }
    }
    .text-img {
        overflow: hidden;
        width: 1200px;
        margin: auto;
        height: 290px;
        background: white;
    }
    .img,
    .text {
        float: left;
    }
    .img {
        overflow: hidden;
        width: 330px;
        height: 220px;
        margin: 20px 50px 20px 20px;
    }
    .text {
        margin: 10px 0;
        width: 600px;
        height: 200px;
       h4{
           margin-top: 15px;
           font-size: 24px;
           font-weight: normal!important;
       }

    }
    .star {
        margin-top: 20px;
        font-size: 14px;
        img {
            margin-left: 10px;
        }
    }
    .price {
        margin-top: 18px;
        font-size: 24px;
        color: #00cf8c;
    }
    .btn {
        margin-top: 27px;
        width: 160px;
        height: 45px;
        background: #00cf8c;
        color: white;
        text-align: center;
        border: 0;
        font-size: 18px;
    }
    .btn:hover {
        cursor: pointer;
    }
    .love {
        margin-top: 25px;
        margin-right: 30px;
        float: right;
        width: 110px;
        height: 30px;
        border: 1px solid #999;
        text-align: center;
        line-height: 30px;
        color: #ddd;
    }
.switch-list {
    overflow: hidden;
    width: 1200px;
    margin: 20px auto;
    /*height: 440px;*/
    background: white;
}
    .tabs {
        margin-left: 20px;
    }
    .big-title {
        font-size: 22px;
        padding: 5px 0 5px 10px;
    }
    .small-title {
        padding-left: 20px;
        margin-top: 10px;
        font-size: 14px;
        width: 1120px;
        height: 50px;
        background: #f2f2f2;
        line-height: 50px;
        color: #999;
    }
.small-title:hover {
    color:#00cf8c;
    cursor: pointer;
}
    .down {
        margin-right: 60px;
        float: right;
        width: 80px;
        height: 30px;
        color: white;
        background: #24a5fe;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
    }
    .evaluation {
        margin-top: 15px;
    }
    .comments {
        margin-top: 10px;
        width: 1154px;
        height: 163px;
        border: 1px solid #ddd;
        outline: #00cf8c;
        resize: none;
        font-size: 16px;
    }
.comments:hover {
    border: 1px solid #00cf8c;
}
    .publish {
        margin-right: 30px;
        float: right;
        margin-top: 6px;
        width: 88px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: white;
        background: #00cf8c;
    }
    .line {
        width: 1150px;
        margin-top: 68px;
        border-bottom: 1px solid #ddd;
    }
    .head-portrait {
        margin-top: 10px;
    }
    .circle-img {
        width: 32px;
        height: 32px;
        /*background: black;*/
        border-radius: 50%;
        float: left;
    }
.circle-img>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

    .head {
        float: left;
        margin-top: 15px;
        margin-left: 13px;
    }
    .star-1 {
        float: right;
        margin-right: 45px;
        margin-top: 20px;

    }
    .text-1 {
        margin-left: 10px;
        margin-top: 10px;
    }
    .right>div {
        margin-bottom: 40px;
        margin-right: 20px;
        float: right;
    }
    .right {
        font-size: 14px!important;
        overflow: hidden;
    }
    .time {
        /*font-size: 12px;*/
        margin-right: 40px!important;
    }
    .reply-comment {
        margin-top: 10px;
        overflow: hidden;
        width: 1160px;
        height: 100px;
        border: 1px solid gray;
        background: #f2f2f2;
    }
    .small-img {
        margin-top: 5px;
        margin-left: 5px;
        float: left;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid black ;
    }
    .small-img>img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .name-1,.name-2 {
        margin-left: 10px;
        color: #24a5fe;
    }
    .text-2 {
        margin-top: 10px;
        float: left;
    }
    .right-1 {
        overflow: hidden;
        float: right;
        margin-right: 10px;
        div {
            font-size: 14px;
            margin-top: 24px;
            float: right;
        }
    }
.right-1>div:nth-of-type(2) {
    margin-right: 30px;
}

    .paging {
        width: 480px;
        margin: 20px auto;
    }
/deep/  .el-tabs__item:hover {
    color:#00cf8c;
}
/deep/ .el-tabs__item.is-active {
    color: #00cf8c;
}
    /deep/ .el-tabs__active-bar {
        background: #00cf8c;
    }


</style>